<template>
  <div class="orderTable">
    <el-table
      @selection-change="handleSelectionChange"
      :data="props.tableData"
      style="width: 100%"
      v-loading="loading"
    >
      <!-- <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="50" />
      <el-table-column prop="shop_id" label="shop_id" width="150" />
      <el-table-column prop="order_name" label="order_name" width="150" />
      <el-table-column prop="country" label="country" width="150" />
      <el-table-column prop="country_code" label="country_code" width="150" />
      <el-table-column prop="buyer_name" label="buyer_name" width="120" />
      <el-table-column label="ScareOrder Quote" class-name="Quote">
        <el-table-column prop="address1" label="address1" width="120" />
        <el-table-column prop="price" label="price" width="120" />
        <el-table-column prop="source" label="source " />
      </el-table-column> -->
      <!-- Amount: 4.55 USD
Shipping: 5.00 USD
Order time:
26 Apr 2020 09:35 -->

      <!-- 订单表格 -->
      <el-table-column v-if="!props.type" type="selection" width="50" />
      <!-- order -->
      <el-table-column prop="index" width="50" />
      <el-table-column label="Orders" width="150">
        <template #default="scope">
          <div v-if="!!scope.row">
            <strong>{{ scope.row.order_name }}</strong>
            <p>
              <span class="p13777">Amount:</span>
              <strong>{{ scope.row.price }}</strong>
              <span class="p13">{{ scope.row.currency }}</span>
            </p>
            <p>
              <span class="p13777">Shipping:</span
              ><strong>{{ scope.row.price }}</strong>
              <span class="p13">{{ scope.row.currency }}</span>
            </p>
            <p><span class="p13777">Order time: </span></p>
            <p>{{ scope.row.created_at_str }}</p>
          </div>
        </template>
      </el-table-column>
      <!-- Store -->
      <el-table-column prop="province" label="Store">
        <template #default="scope">
          <div class="dflex">
            <img src="@\assets\icons\Group1000002132.svg" alt="" srcset="" />
            <p>{{ scope.row.province }}</p>
          </div>
        </template>
      </el-table-column>
      <!-- Shipping address -->
      <el-table-column prop="city" label="Shipping address">
        <template #default="scope">
          <p>{{ scope.row.city }}</p>
          <OrDropdown />
        </template>
      </el-table-column>
      <!-- Product  -->
      <el-table-column prop="city" label="Product" width="256">
        <template #default="scope">
          <OrderProduct :scope="scope" />
          <el-divider border-style="dashed" />
          <OrderProduct :scope="scope" />
        </template>
      </el-table-column>

      <el-table-column label="ScareOrder Quote" class-name="o-Quote">
        <el-table-column
          prop="address1"
          label="Product cost"
          class-name="o-Quote"
        >
          <template #default="scope">
            <strong>{{ scope.row.price }}</strong>
            <span class="p13">{{ scope.row.currency }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Shipping" label="Shipping" class-name="o-Quote">
          <template #default="scope">
            <strong>{{ scope.row.price }}</strong>
            <span class="p13">{{ scope.row.currency }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="Total" label="Total" class-name="o-Quote">
          <template #default="scope">
            <p class="p-22214">
              <strong>{{ scope.row.price }}</strong>
              <span class="p13">{{ scope.row.currency }}</span>
            </p>
            <p class="p13777 line-through">
              {{ scope.row.price }}
              {{ scope.row.currency }}
            </p>
            <p class="p13red">
              {{ scope.row.price }}
              <span class="p13">{{ scope.row.currency }}</span>
            </p>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>

    <!--  -->
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import OrDropdown from "@/components/OrDropdown/index.vue";
import OrderProduct from "@/components/OrderTable/orderProduct.vue";
const multipleSelection = ref([]);
// const tableType = ref('default'); //表格类型
const props = defineProps(["tableData", "type", "loading"]);
console.log("table接收", props.tableData);

// 多选框
const handleSelectionChange = (val: any) => {
  console.log(val);
  multipleSelection.value = val;
};
</script>

<style lang="scss">
.orderTable {
  .p13 {
    font-size: 13px;
    margin-left: 5px;
  }
  strong {
    font-weight: 600 !important;
  }
  .is-group .o-Quote {
    border-left: 1px solid #ebeef5 !important;
  }
  .el-table td.el-table__cell,
  .el-table--border .el-table__cell {
    border-right: none;
  }
  .is-group .el-table__cell {
    padding: 0;
    background: transparent !important;
  }
  .el-table .el-table__cell {
    color: var(--unnamed, #777);
    /* 文字/13px-Regular */
    font-size: 13px;
    font-weight: 400;
  }
  .el-table__body-wrapper .el-table__cell {
    vertical-align: top;
  }
  .el-table td.el-table__cell div {
    color: var(--unnamed, #222);
    font-size: 13px;
  }
}
::v-deep .el-table thead.is-group th.el-table__cell {
  background: transparent !important;
  color: var(--unnamed, #777);

  /* 文字/13px-Regular */
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  padding: 0;
}
/* ::v-deep .el-table__inner-wrapper {
  padding: 0 10px;
} */
::v-deep .el-table .cell {
  padding: 0 20px;
}
::v-deep .el-pagination {
  justify-content: center;
  margin: 10px 0;
}
::v-deep .el-divider--horizontal {
  margin: 20px 0 !important;
}
</style>
